<!-- 分类新增、编辑弹窗 -->
<template>
  <a-modal
    :maskClosable="false"
    :title="title"
    centered
    :width="1000"
    v-model="visible"
    :confirmLoading="confirmLoading"
    cancelText="返回"
    okText="保存"
    @ok="handleSubmit"
  >
    <a-form-model :model="form" :labelCol="labelCol" :wrapperCol="wrapperCol">
      <a-form-model-item label="父级分类">
        <a-select v-model="form.parentId">
          <a-select-option :value="0">无</a-select-option>
          <a-select-option v-for="option in categoryList" :value="option.id" :key="option.id"
            >{{ option.module }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="分类名称">
        <a-input v-model="form.module" :maxLength="8" placeholder="请输入标题" />
      </a-form-model-item>
      <a-form-model-item style="height: 140px" label="分类图标">
        <UploadImg v-model="form.iconUrl" />
      </a-form-model-item>
      <a-form-model-item label="查看身份限制">
        <a-radio-group name="radioGroup" v-model="form.identityLimit">
          <a-radio :value="0">
            不限制
          </a-radio>
          <a-radio :value="1">
            限定会员身份可查看<span style="color: #86909C;">（由于官网不区分会员，限制后不可发布到官网）</span>
          </a-radio>
        </a-radio-group>
        <a-checkbox-group v-if="form.identityLimit" v-model="checkedMemberLevelList">
          <a-row>
            <a-col v-for="item in memberLevelList" :span="12" :key="item.memberLevelId">
              <a-checkbox :value="item.memberLevelId">
                {{ item.memberLevelName }}
              </a-checkbox>
            </a-col>
          </a-row>
        </a-checkbox-group>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
import UploadImg from '@/components/UpFile/uploadImg'
import {
  informationCategoryListByLevel,
  addInformationCategory,
  editInformationCategory,
  getMemberLevelList,
  getInformationCategoryDetail
} from '@/api/content/management'
import { cloneDeep } from 'lodash-es'
const initForm = {
  id: undefined,
  module: undefined,
  iconUrl: undefined,
  parentId: 0,
  identityLimit: 0,
  memberLevelList: []
}
export default {
  components: {
    UploadImg
  },
  data() {
    return {
      visible: false,
      title: '新增分类',
      type: 'add',
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false,
      form: {},
      categoryList: [],
      memberLevelList: []
    }
  },
  computed: {
    checkedMemberLevelList: {
      get() {
        return this.form.memberLevelList ? this.form.memberLevelList.map(item => item.memberLevelId) : []
      },
      set(val) {
        this.form.memberLevelList = this.memberLevelList.filter(item => val.includes(item.memberLevelId))
      }
    }
  },
  watch: {},
  methods: {
    show(data) {
      let { type, title, obj } = data
      this.type = type
      this.title = title
      this.getInformationCategoryListByLevel()
      this.queryMemberLevelList()
      this.visible = true
      if (obj.id) {
        this.queryInformationCategoryDetail(obj)
      } else {
        this.form = cloneDeep(initForm)
      }
    },
    async queryInformationCategoryDetail({ id, level }) {
      const res = await getInformationCategoryDetail({ id, level })
      this.form = res.data
    },
    async queryMemberLevelList() {
      const res = await getMemberLevelList()
      this.memberLevelList = res.data
    },
    async getInformationCategoryListByLevel() {
      let res = await informationCategoryListByLevel()
      this.categoryList = res.data || []
    },
    async handleSubmit() {
      let res = {}
      if (this.type === 'add') {
        res = await addInformationCategory({ ...this.form })
      } else {
        res = await editInformationCategory({ ...this.form })
      }
      let { code, msg } = res
      this.$message[code === 0 ? 'success' : 'error'](msg)
      if (code === 0) {
        this.$emit('success')
        this.visible = false
      }
    }
  },
  created() {},
  mounted() {}
}
</script>
<style scoped></style>
